<template>	
	<view class="page">
		<view class="header">
			<uni-icons type="left" size="25" class="back-icon"></uni-icons>
			<view class="top-toggle-btns">
				<view class="top-toggle-btn-left">身高</view>
				<view class="top-toggle-btn-right ">体重</view>
			</view>
		</view>
		
		<view class="toggle-btns">
			<view class="toggle-btn toggle-btn-left" :class="{'active': toggle==0}" @click="toggle=0">曲线</view>
			<view class="toggle-btn toggle-btn-right" :class="{'active': toggle==1}" @click="toggle=1">记录</view>
		</view>
		<view class="charts-box" v-if="toggle == 0">
			<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
		</view>
		<view class="record-box" v-if="toggle == 1">
			<view class="record-item no-arrow">
				<view class="record-age">年龄</view>
				<view class="record-height">身高</view>
			</view>
			<view class="record-item">
				<view class="record-age">2岁</view>
				<view class="record-height"><text>12.0</text>kg</view>
			</view>
			<view class="record-item">
				<view class="record-age">1岁半</view>
				<view class="record-height"><text>70.0</text>kg</view>
			</view>
			<view class="record-item">
				<view class="record-age">8个月</view>
				<view class="record-height"><text>5.0</text>kg</view>
			</view>
			<view class="record-item">
				<view class="record-age">出生</view>
				<view class="record-height"><text>4.2</text>kg</view>
			</view>
		</view>
		<button class="add-btn">添加记录</button>
	</view>
        
</template>

<script>
export default {
	data() {
		return {
			toggle: 0, //切换的状态（0曲线，1记录）
			chartData: {},
			opts: {
				color: ["#666ee8"],
				padding: [50, 15, 15, 15],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2,
					data: [{
						title: "单位：kg",
						titleOffsetX: 8,
						titleOffsetY: -20
					}],
					showTitle: true
				},
				extra: {
					area: {
						type: "straight",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true,
						activeType: "hollow"
					}
				}
			}
		}
	},
	methods: {
		getChartData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				let res = {
					categories: ["出生", "8个月", "1年", "16个月", "2年"],
					series: [{
						name: "体重",
						data: [4.0, 4.5, 9.0, 13.0, 15.0]
					},
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		},
	},
	onReady() {
		this.getChartData();
	}
}
</script>

<style scoped>
.page{
	position: relative;
}

.header{
	border-bottom: solid #f2f2f2;
}

.back-icon{
	position: fixed;
	padding-top: 8rpx;
	padding-left: 12rpx;
}

.top-toggle-btns {
	display: flex;
	justify-content: center;
	margin: auto;
}

.toggle-btns {
	display: flex;
	justify-content: center;
	margin: 70rpx auto;
}

.top-toggle-btn-left {
	width: 220rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: #000;
	cursor: pointer;
}
.top-toggle-btn-right {
	width: 220rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: #666ee8;
	border-bottom: solid #666ee8;
	cursor: pointer;
}

.toggle-btn {
	width: 220rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: #999;
	background-color: #fff;
	border: 1px solid #f2f2f2;
	cursor: pointer;
}

.toggle-btn.active {
	color: #fff;
	background-color: #666ee8;
	border-color: #666ee8;
}

.toggle-btn-left {
	border-right: none;
	border-top-left-radius: 60rpx;
	border-bottom-left-radius: 60rpx;
}

.toggle-btn-right {
	border-left: none;
	border-top-right-radius: 60rpx;
	border-bottom-right-radius: 60rpx;
}

.charts-box {
	height: 300px;
	margin: 60rpx 40rpx 60rpx;
	background-color: #fff;
	border-radius: 8rpx;
	box-shadow: 0px 2px 10px rgba(204, 204, 204, 0.4);
}

.record-box {
	margin: 60rpx 40rpx 60rpx;
	background-color: #fff;
	border-radius: 8rpx;
	box-shadow: 0px 2px 10px rgba(204, 204, 204, 0.4);
}

.record-item {
	display: flex;
	height: 100rpx;
	line-height: 100rpx;
	padding: 0 50rpx;
	font-size: 28rpx;
	color: #333;
	border-bottom: 1px solid #f2f2f2;
	cursor: pointer;
}

.record-item::after {
	content: ">";
	font-size: 36rpx;
	color: #ccc;
}

.record-item.no-arrow::after {
	visibility: hidden;
}

.record-age,
.record-height {
	flex: 1;
}

.record-height text {
	font-size: 36rpx;
	font-weight: bold;
	color: #666ee8;
}

.add-btn {
	height: 88rpx;
	line-height: 88rpx;
	margin: auto 40rpx;
	font-size: 32rpx;
	color: #fff;
	background-color: #666ee8;
	border: none;
	border-radius: 88rpx;
}
</style>
